<template>
	<view class="u-swipe-action-item" ref="u-swipe-action-item">
		<view class="u-swipe-action-item__right">
			<slot name="button">
				<view
					v-for="(item, index) in options"
					:key="index"
					class="u-swipe-action-item__right__button"
					:ref="`u-swipe-action-item__right__button-${index}`"
					:style="[
						{
							alignItems: item.style && item.style.borderRadius ? 'center' : 'stretch'
						}
					]"
					@tap="buttonClickHandler(item, index)"
				>
					<view
						class="u-swipe-action-item__right__button__wrapper"
						:style="[
							{
								backgroundColor:
									item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
								borderRadius: item.style && item.style.borderRadius ? item.style.borderRadius : '0',
								padding: item.style && item.style.borderRadius ? '0' : '0 15px'
							},
							item.style
						]"
					>
						<u-icon
							v-if="item.icon"
							:name="item.icon"
							:color="item.style && item.style.color ? item.style.color : '#ffffff'"
							:size="
								item.iconSize
									? $u.addUnit(item.iconSize)
									: item.style && item.style.fontSize
									? $u.getPx(item.style.fontSize) * 1.2
									: 17
							"
							:customStyle="{
								marginRight: item.text ? '2px' : 0
							}"
						></u-icon>
						<text
							v-if="item.text"
							class="u-swipe-action-item__right__button__wrapper__text u-line-1"
							:style="[
								{
									color: item.style && item.style.color ? item.style.color : '#ffffff',
									fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px',
									lineHeight: item.style && item.style.fontSize ? item.style.fontSize : '16px'
								}
							]"
						>
							{{ item.text }}
						</text>
					</view>
				</view>
			</slot>
		</view>
		<!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
		<view
			class="u-swipe-action-item__content"
			@touchstart="wxs.touchstart"
			@touchmove="wxs.touchmove"
			@touchend="wxs.touchend"
			:status="status"
			:change:status="wxs.statusChange"
			:size="size"
			:change:size="wxs.sizeChange"
		>
			<slot></slot>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-NVUE -->
		<view
			class="u-swipe-action-item__content"
			ref="u-swipe-action-item__content"
			@panstart="onTouchstart"
			@tap="clickHandler"
		>
			<slot></slot>
		</view>
		<!-- #endif -->
	</view>
</template>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
<script src="./index.wxs" module="wxs" lang="wxs"></script>
<!-- #endif -->
<script>
import touch from '../../libs/mixin/touch.js'
import props from './props.js'
import mpMixin from '../../libs/mixin/mpMixin.js'
import mixin from '../../libs/mixin/mixin.js'
// #ifdef APP-NVUE
import nvue from './nvue.js'
// #endif
// #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ
import wxs from './wxs.js'
// #endif
/**
 * SwipeActionItem 滑动单元格子组件
 * @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作
 * @tutorial https://www.uviewui.com/components/swipeAction.html
 * @property {Boolean}			show			控制打开或者关闭（默认 false ）
 * @property {String | Number}	index			标识符，如果是v-for，可用index索引
 * @property {Boolean}			disabled		是否禁用（默认 false ）
 * @property {Boolean}			autoClose		是否自动关闭其他swipe按钮组（默认 true ）
 * @property {Number}			threshold		滑动距离阈值，只有大于此值，才被认为是要打开菜单（默认 30 ）
 * @property {Array}			options			右侧按钮内容
 * @property {String | Number}	duration		动画过渡时间，单位ms（默认 350 ）
 * @event {Function(index)}	open	组件打开时触发
 * @event {Function(index)}	close	组件关闭时触发
 * @example	<u-swipe-action><u-swipe-action-item :options="options1" ></u-swipe-action-item></u-swipe-action>
 */
export default {
	name: 'u-swipe-action-item',
	// #ifndef MP
	emits: ['click'],
	// #endif
	// #ifndef APP-NVUE
	mixins: [mpMixin, mixin, props, touch],
	// #endif
	// #ifdef APP-NVUE
	mixins: [mpMixin, mixin, props, nvue, touch],
	// #endif
	// #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ
	mixins: [mpMixin, mixin, props, touch, wxs],
	// #endif
	data() {
		return {
			// 按钮的尺寸信息
			size: {},
			// 父组件u-swipe-action的参数
			parentData: {
				autoClose: true
			},
			// 当前状态，open-打开，close-关闭
			status: 'close'
		}
	},
	watch: {
		// 由于wxs无法直接读取外部的值，需要在外部值变化时，重新执行赋值逻辑
		wxsInit(newValue, oldValue) {
			this.queryRect()
		}
	},
	computed: {
		wxsInit() {
			return [this.disabled, this.autoClose, this.threshold, this.options, this.duration]
		}
	},
	mounted() {
		this.init()
	},
	methods: {
		init() {
			// 初始化父组件数据
			this.updateParentData()
			// #ifndef APP-NVUE
			uni.$u.sleep().then(() => {
				this.queryRect()
			})
			// #endif
		},
		updateParentData() {
			// 此方法在mixin中
			this.getParentData('u-swipe-action')
		},
		// #ifndef APP-NVUE
		// 查询节点
		queryRect() {
			this.$uGetRect('.u-swipe-action-item__right__button', true).then(buttons => {
				this.size = {
					buttons,
					show: this.show,
					disabled: this.disabled,
					threshold: this.threshold,
					duration: this.duration
				}
			})
		},
		// #endif
		// 按钮被点击
		buttonClickHandler(item, index) {
			this.$emit('click', {
				index,
				name: this.name
			})
		}
	}
}
</script>

<style lang="scss" scoped>
@import '../../libs/css/components.scss';

.u-swipe-action-item {
	position: relative;
	overflow: hidden;
	/* #ifndef APP-NVUE || MP-WEIXIN */
	touch-action: pan-y;
	/* #endif */

	&__content {
		background-color: #ffffff;
		z-index: 10;
	}

	&__right {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		@include flex;

		&__button {
			@include flex;
			justify-content: center;
			overflow: hidden;
			align-items: center;

			&__wrapper {
				@include flex;
				align-items: center;
				justify-content: center;
				padding: 0 15px;

				&__text {
					@include flex;
					align-items: center;
					color: #ffffff;
					font-size: 15px;
					text-align: center;
					justify-content: center;
				}
			}
		}
	}
}
</style>
